<script setup lang="ts">
import useDictionaryStore from '@/stores/dictionary'
import { onBeforeMount } from 'vue'

const model = defineModel()
const dictionaryStore = useDictionaryStore()

const {
  placeholder = '请选择',
  parentDictionaryValue,
  disabled = false,
  clearable = false,
} = defineProps<{
  parentDictionaryValue: string
  placeholder?: string
  disabled?: boolean
  clearable?: boolean
}>()

const emit = defineEmits(['change'])

function handleChange(value: any) {
  emit('change', value)
}

onBeforeMount(async () => {
  await dictionaryStore.getDictionary(parentDictionaryValue)
})
</script>

<template>
  <el-select
    class="dictionary-select"
    v-model="model"
    :placeholder="placeholder"
    @change="handleChange"
    :disabled="disabled"
    :clearable="clearable"
  >
    <el-option
      v-for="item in dictionaryStore.map.get(parentDictionaryValue)"
      :key="item.dictionaryValue"
      :value="item.dictionaryValue"
      :label="item.dictionaryCode"
    />
  </el-select>
</template>

<style scoped lang="scss"></style>
